/* ==============================================================
    Mixins & Utilities
   --------------------------------------------------------------
    Contains usefull classes, mixins, functions and variables
    usable to easily define custom styles.
   --------------------------------------------------------------
    Author : Yohann CALLEA
    Last update : 20/09/2012
   --------------------------------------------------------------
    Based on LessElements and Bootstrap project 
   ============================================================== */

/* --------------------------------------------------------------
    Colors
   -------------------------------------------------------------- */

@AliceBlue:             #F0F8FF;
@AntiqueWhite:          #FAEBD7;
@Aqua:                  #00FFFF;
@Aquamarine:            #7FFFD4;
@Azure:                 #F0FFFF;
@Beige:                 #F5F5DC;
@Bisque:                #FFE4C4;
@Black:                 #000;
@BlanchedAlmond:        #FFEBCD;
@Blue:                  #0000FF;
@BlueViolet:            #8A2BE2;
@Brown:                 #A52A2A;
@BurlyWood:             #DEB887;
@CadetBlue:             #5F9EA0;
@Chartreuse:            #7FFF00;
@Chocolate:             #D2691E;
@Coral:                 #FF7F50;
@CornflowerBlue:        #6495ED;
@Cornsilk:              #FFF8DC;
@Crimson:               #DC143C;
@Cyan:                  #00FFFF;
@DarkBlue:              #00008B;
@DarkCyan:              #008B8B;
@DarkGoldenRod:         #B8860B;
@DarkGray:              #A9A9A9;
@DarkGrey:              #A9A9A9;
@DarkGreen:             #006400;
@DarkKhaki:             #BDB76B;
@DarkMagenta:           #8B008B;
@DarkOliveGreen:        #556B2F;
@Darkorange:            #FF8C00;
@DarkOrchid:            #9932CC;
@DarkRed:               #8B0000;
@DarkSalmon:            #E9967A;
@DarkSeaGreen:          #8FBC8F;
@DarkSlateBlue:         #483D8B;
@DarkSlateGray:         #2F4F4F;
@DarkSlateGrey:         #2F4F4F;
@DarkTurquoise:         #00CED1;
@DarkViolet:            #9400D3;
@DeepPink:              #FF1493;
@DeepSkyBlue:           #00BFFF;
@DimGray:               #696969;
@DimGrey:               #696969;
@DodgerBlue:            #1E90FF;
@FireBrick:             #B22222;
@FloralWhite:           #FFFAF0;
@ForestGreen:           #228B22;
@Fuchsia:               #FF00FF;
@Gainsboro:             #DCDCDC;
@GhostWhite:            #F8F8FF;
@Gold:                  #FFD700;
@GoldenRod:             #DAA520;
@Gray:                  #808080;
@Grey:                  #808080;
@Green:                 #008000;
@GreenYellow:           #ADFF2F;
@HoneyDew:              #F0FFF0;
@HotPink:               #FF69B4;
@IndianRed:             #CD5C5C;
@Indigo:                #4B0082;
@Ivory:                 #FFFFF0;
@Khaki:                 #F0E68C;
@Lavender:              #E6E6FA;
@LavenderBlush:         #FFF0F5;
@LawnGreen:             #7CFC00;
@LemonChiffon:          #FFFACD;
@LightBlue:             #ADD8E6;
@LightCoral:            #F08080;
@LightCyan:             #E0FFFF;
@LightGoldenRodYellow:  #FAFAD2;
@LightGray:             #D3D3D3;
@LightGrey:             #D3D3D3;
@LightGreen:            #90EE90;
@LightPink:             #FFB6C1;
@LightSalmon:           #FFA07A;
@LightSeaGreen:         #20B2AA;
@LightSkyBlue:          #87CEFA;
@LightSlateGray:        #778899;
@LightSlateGrey:        #778899;
@LightSteelBlue:        #B0C4DE;
@LightYellow:           #FFFFE0;
@Lime:                  #00FF00;
@LimeGreen:             #32CD32;
@Linen:                 #FAF0E6;
@Magenta:               #FF00FF;
@Maroon:                #800000;
@MediumAquaMarine:      #66CDAA;
@MediumBlue:            #0000CD;
@MediumOrchid:          #BA55D3;
@MediumPurple:          #9370D8;
@MediumSeaGreen:        #3CB371;
@MediumSlateBlue:       #7B68EE;
@MediumSpringGreen:     #00FA9A;
@MediumTurquoise:       #48D1CC;
@MediumVioletRed:       #C71585;
@MidnightBlue:          #191970;
@MintCream:             #F5FFFA;
@MistyRose:             #FFE4E1;
@Moccasin:              #FFE4B5;
@NavajoWhite:           #FFDEAD;
@Navy:                  #000080;
@OldLace:               #FDF5E6;
@Olive:                 #808000;
@OliveDrab:             #6B8E23;
@Orange:                #FFA500;
@OrangeRed:             #FF4500;
@Orchid:                #DA70D6;
@PaleGoldenRod:         #EEE8AA;
@PaleGreen:             #98FB98;
@PaleTurquoise:         #AFEEEE;
@PaleVioletRed:         #D87093;
@PapayaWhip:            #FFEFD5;
@PeachPuff:             #FFDAB9;
@Peru:                  #CD853F;
@Pink:                  #FFC0CB;
@Plum:                  #DDA0DD;
@PowderBlue:            #B0E0E6;
@Purple:                #800080;
@Red:                   #FF0000;
@RosyBrown:             #BC8F8F;
@RoyalBlue:             #4169E1;
@SaddleBrown:           #8B4513;
@Salmon:                #FA8072;
@SandyBrown:            #F4A460;
@SeaGreen:              #2E8B57;
@SeaShell:              #FFF5EE;
@Sienna:                #A0522D;
@Silver:                #C0C0C0;
@SkyBlue:               #87CEEB;
@SlateBlue:             #6A5ACD;
@SlateGray:             #708090;
@SlateGrey:             #708090;
@Snow:                  #FFFAFA;
@SpringGreen:           #00FF7F;
@SteelBlue:             #4682B4;
@Tan:                   #D2B48C;
@Teal:                  #008080;
@Thistle:               #D8BFD8;
@Tomato:                #FF6347;
@Turquoise:             #40E0D0;
@Violet:                #EE82EE;
@Wheat:                 #F5DEB3;
@White:                 #FFF;
@WhiteSmoke:            #F5F5F5;
@Yellow:                #FFFF00;
@YellowGreen:           #9ACD32;



/* --------------------------------------------------------------
    Sizing
   -------------------------------------------------------------- */


/**
 *  Create a square shaped element.
 * 
 *  @size  Size of the square
 */
.size(@size) {
   .size(@size, @size);
}

/**
 *  Sets an element width and height.
 * 
 *  @height  Height value
 *  @width   Width value
 */
.size(@height, @width) {
    height: @height;
    width: @width;
}




/* --------------------------------------------------------------
    Gradient
   -------------------------------------------------------------- */

/**
 *  Sets a gradient background 
 *  
 *  @startColor  Start color
 *  @endColor    End color and background color for browsers that doesn't support gradients
 *  @deg         Gradient angle, in degrees
 *  @midColor    Start middle color
 *  @colorStop   End middle color
 */

#gradient {
    .horizontal (@startColor: #555, @endColor: #333) {
        background-color: @endColor;
        background-repeat: repeat-y;
        background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
        background-image: -moz-linear-gradient(left, @startColor, @endColor);
        background-image: -ms-linear-gradient(left, @startColor, @endColor);
        background-image: -webkit-linear-gradient(left, @startColor, @endColor);
        background-image: -o-linear-gradient(left, @startColor, @endColor);
        filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor));
        -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor);
        background-image: linear-gradient(left, @startColor, @endColor);
    }
    
    .vertical (@startColor: #555, @endColor: #333) {
        background-color: @endColor;
        background-repeat: repeat-x;
        background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
        background-image: -moz-linear-gradient(@startColor, @endColor);
        background-image: -ms-linear-gradient(@startColor, @endColor);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor));
        background-image: -webkit-linear-gradient(@startColor, @endColor);
        background-image: -o-linear-gradient(@startColor, @endColor);
        filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor));
        -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor);
        background-image: linear-gradient(@startColor, @endColor);
    }
    
    .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
        background-color: @endColor;
        background-repeat: repeat-x;
        background-image: -moz-linear-gradient(@deg, @startColor, @endColor);
        background-image: -ms-linear-gradient(@deg, @startColor, @endColor);
        background-image: -webkit-linear-gradient(@deg, @startColor, @endColor);
        background-image: -o-linear-gradient(@deg, @startColor, @endColor);
        background-image: linear-gradient(@deg, @startColor, @endColor);
    }
    
    .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
        background-color: @endColor;
        background-repeat: no-repeat;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
        background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
        background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
    }
}



/* --------------------------------------------------------------
    Borders
   -------------------------------------------------------------- */
  
/**
 *  Set a border that doesn't varies on each side.
 * 
 *  @color      Border color
 *  @thickness  Border thickness 
 */
.border(@color: @Black, @thickness: 1px) {
    border: solid @thickness @color;
}

/**
 *  Set a border that varies on each side.
 * 
 *  @top-color     Top border color
 *  @right-color   Right border color
 *  @bottom-color  Bottom border color
 *  @left-color    Left border color
 *  @thickness     Border thickness 
 */
.border(@top-color, @right-color, @bottom-color, @left-color, @thickness: 1px) {
    border-top: solid 1px @top-color;
    border-left: solid 1px @left-color;
    border-right: solid 1px @right-color;
    border-bottom: solid 1px @bottom-color;
}

/**
 *  Set a border radius for all corners.
 * 
 *  @radius  Horizontal and vertical radius
 */
.border-radius(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
       
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box; 
}

/**
 *  Set a border radius for all corner individually.
 * 
 *  @topleft      Radius value for top left corner
 *  @topright     Radius value for top right corner
 *  @bottomright  Radius value for bottom right corner
 *  @bottomleft   Radius value for bottom left corner
 */
.border-radius(@topleft, @topright, @bottomright, @bottomleft) {
    -webkit-border-top-right-radius: @topright;
    -webkit-border-bottom-right-radius: @bottomright;
    -webkit-border-bottom-left-radius: @bottomleft;
    -webkit-border-top-left-radius: @topleft;
    
    -moz-border-radius-topright: @topright;
    -moz-border-radius-bottomright: @bottomright;
    -moz-border-radius-bottomleft: @bottomleft;
    -moz-border-radius-topleft: @topleft;
    
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
    border-top-left-radius: @topleft;
    
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box; 
}



/* --------------------------------------------------------------
    Transformations
   -------------------------------------------------------------- */

/**
 * Sets the opacity.
 * 
 * @opacity  Element opacity
 */
.opacity(@opacity: 1) {
    -moz-opacity: @opacity;
    -khtml-opacity: @opacity;
    -webkit-opacity: @opacity;
    filter: e(%("alpha(opacity=%d)", @opacity));
    opacity: @opacity;
}

/**
 *  Rotates an item.
 * 
 *  @deg Angle in degrees
 */
.rotation(@deg) {
	-webkit-transform: rotate(@deg);
	-moz-transform: rotate(@deg);
	-ms-transform: rotate(@deg);
	-o-transform: rotate(@deg);
	transform: rotate(@deg);
}

/**
 *  Scales an item by the ratio provided.
 * 
 *  @ratio Value of the scale ratio
 */
.scale(@ratio: 1.5) {
	-webkit-transform: scale(@ratio);
	-moz-transform: scale(@ratio);
	-ms-transform: scale(@ratio);
	-o-transform: scale(@ratio);
	transform: scale(@ratio);
}

/**
 *  Sets the transition duration and the effect to use
 * 
 *  @duration  Trasition duration, in seconds
 *  @ease      Trasition effect
 */
.transition(@duration: 0.2s, @ease: ease-out) {
	-webkit-transition: all @duration @ease;
	-moz-transition: all @duration @ease;
	-o-transition: all @duration @ease;
	transition: all @duration @ease;
}

/**
 *  Sets the transition duration.
 * 
 *  @duration Transition duration, in seconds
 */
.transition-duration(@duration: 0.2s) {
	-moz-transition-duration: @duration;
	-webkit-transition-duration: @duration;
	-o-transition-duration: @duration;
	transition-duration: @duration;
}

/**
 *  Translates an element.
 * 
 *  @x  X offset
 *  @y  Y offset
 */
.translate(@x: 0, @y: 0) {
    -moz-transform: translate(@x, @y);
    -webkit-transform: translate(@x, @y);
    -o-transform: translate(@x, @y);
    -ms-transform: translate(@x, @y);
    transform: translate(@x, @y);
}

  
  
/* --------------------------------------------------------------
  Shadows
 -------------------------------------------------------------- */

/**
 *  Sets the inner shadow.
 * 
 *  @horizontal  Horizontal shadow
 *  @vertical    Vertical shadow
 *  @blur        Blur of the shadow
 *  @alpha       Opacity of the shadow
 */
.inner-shadow(@horizontal, @vertical, @blur, @alpha: 1) {
    -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
    box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}

/**
 *  Sets the box shadow.
 * 
 *  @arguments  h-shadow v-shadow blur spread color inset;
 */
.box-shadow(@arguments) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

/**
 *  Sets the text shadow.
 */
.text-shadow(@arguments) {
	-webkit-text-shadow: @arguments;
	text-shadow: @arguments;
}



/* --------------------------------------------------------------
    Fonts
   -------------------------------------------------------------- */

/**
 *  Sets the font style and allow to choose a font family.
 * 
 *  @weight      Font weight
 *  @size        Font size
 *  @lineHeight  Line height
 */
#font {
    .style(@weight: normal, @size: 14px, @lineHeight: 20px) {
        font-size: @size;
        font-weight: @weight;
        line-height: @lineHeight;
    }
    
    .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: @size;
        font-weight: @weight;
        line-height: @lineHeight;
    }
    
    .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
        font-family: "Georgia", "Times New Roman", Times, sans-serif;
        font-size: @size;
        font-weight: @weight;
        line-height: @lineHeight;
    }
    
    .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
        font-family: "Monaco", "Courier New", monospace;
        font-size: @size;
        font-weight: @weight;
        line-height: @lineHeight;
    }
}



/* --------------------------------------------------------------
    Button
   -------------------------------------------------------------- */

/**
 *  Sets a button's style.
 * 
 *  @color         Background color
 *  @textColor     Text color
 *  @textShadow    Text shadow
 *  @fontSize      Font size
 *  @padding       Button padding
 *  @borderRadius  Rounded border radius
 */
.button(@color: #f5f5f5, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @padding: 9px 15px 10px, @borderRadius: 6px) {
    display: inline-block;
    #gradient > .vertical(@color,darken(saturate(@color,10),10));
    padding: @padding;
    .text-shadow(@textShadow);
    color: @textColor;
    font-size: @fontSize;
    line-height: 20px;
    .border-radius(@borderRadius);
    @shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
    .box-shadow(@shadow);
    
    &:hover {
        background-position: 0 -15px;
        color: @textColor;
        text-decoration: none;
    }
}